<template>
  <div class="search">
   <!-- 搜索头部 -->
   <div class="search-heard d-flex jc-between ai-center">
   	<!-- 左侧返回 -->
   	 <div> 
   	 	<el-button type="text" @click="$router.go(-1)">
   	 		<div class="iconfont icon-back ml-3 fs-xxxl text-dark"></div>
   	 	</el-button>
   	 </div>
   	 <!-- 中间搜索框 -->
     <div>
      <div class="search-input d-flex jc-between ai-center mr-3 my-1 pl-3 ml-3">
        <i class="mintui mintui-search fs-xxl"></i>
        <input ref="search" class="py-1" type="text" v-model="keyWord" />
      </div>
     </div>
   	 <!-- 搜索按钮 -->
   	 <div>
   	 	<el-button class="px-3 text-dark fs-xxl" type="text" @click="searchClick()">搜索</el-button>
   	 </div>
   </div>
   <!-- 搜索历史 -->
   <div class="search-history pt-3 px-2 bg-white my-3" v-show="history.length>0">
    <div class="d-flex ai-center jc-between">
      <div class="history fs-xxxl">
        历史搜索
      </div>
      <div class="clear-history py-2 px-2" style="text-align: center;">
        <van-icon size="1.5rem" color="grey" name="delete" @click="clearHistory()" />
      </div>
    </div>
      
      <div class="d-flex flex-wrap">
      	<div style="word-break: keep-all;" class="history-item fs-xl px-2 py-2 pt-3 text-grey" @click="searchClick(item)" v-for='(item,index) in history' :key="index">
      		{{item}}
      	</div>
      </div>
      
    </div>
   <!-- 推荐 -->
   <div class="keyword-box pt-3 px-2 bg-white my-3" v-if="hotSearchKey.length>0">
   	<div class="keyword-header">
   		<div class="history fs-xxxl">
   			热门搜索
   		</div>

   	</div>
   	<div class="keyword-content">
   		<div class="d-flex flex-wrap width-100">
      	<div @click="searchClick(item)" style="word-break: keep-all;" class="hot-item fs-xl px-2 py-2 pt-3 text-primary" v-for='(item,index) in hotSearchKey' :key="index">
      		<span>{{item}}</span>
      	</div>
      </div>
   	</div>
   </div>

    
   
  </div>
</template>

<script>
import {Toast} from 'mint-ui'
export default {
  data() {
    return {
      keyWord: "",
      clearShow: false,
      history: [],
      hotSearchKey: ['口罩','感冒药','咳嗽水']
    };
  },
  methods: {
    clearAll() {
      this.keyWord = "";
    },
    searchClick(name) {
      if (this.keyWord.trim() != "") {
      	// 调用这个方法 
        this.$store.dispatch("set_search_history", this.keyWord);
        this.$router.push(`/classify/${this.keyWord}`);
      }else {
        if (name) {
          this.keyWord = name
          this.$router.push(`/classify/${this.keyWord}`);
        }else {
          Toast('请输入搜索信息')
        }
        
      }
    },
    clearHistory() {
      this.history = [];
      this.$store.dispatch("clear_history");
    }
  },
  watch: {
    keyWord(curVal) {
      this.clearShow = !(curVal.trim() == "");
    }
  },
  created() {
  	//历史搜索列表
    this.history = this.$store.getters.search_history;
    //热门搜索列表 从数据库中获取
    // this.hotSearchKey = data;
    
  },
  mounted() {
    let input = this.$refs.search;
    input.focus();
  }
};
</script>

<style lang="scss" scoped>
.search-input {
  background-color: #eee;
  border: none;
  border-radius: 80px;
  width: 100%;
  height: 85%;
  overflow: hidden;
  input[type="text"] {
    font-size: 18px;
    border: none;
    width: 90%;
    height: 80%;
    color: #979595;
    background-color: #eee;
    
  }

}
.hot-item{
	
}
</style>


